<template>
  <div class="wrapper">
  <div class="switchTitle">
   <Button class="switchButton"  type="primary">保存</Button>   
   <Button class="switchButton"  >预览</Button>   
      <span class="switchClose"><Icon type="ios-close" size="32"/></span>
    </div>
      <div class="mainContent">
          <div class="switchTitle"> 
            <ul class="mainContentUl">
              <li class="mainContentTitle">
                  <span @click="openSplit = true ">界面分割</span>
              </li>
                <li class="mainContentTitle">
                  <span>增加</span>
              </li>
            </ul>
          
            <splitModal  v-model="openSplit" @changeVal="changeVal"></splitModal>
          </div>
          <div class="designBoard">
            <div id="designItem">
                        
                              <Row type="flex" :key="item1.name+index1" v-for="(item1,index1) in pagesEl" class="designRow" :style="{width:item1.width,height:item1.height}">
                                  <draggable v-model="pagesEl" tag="div" class="draggableDesign" :move="getdata" @update="datadragEnd">            
                                      <transition-group tag="draggableDesign" class="222" >  
                                          <Col :key="item2.name+index2"
                                            v-for="(item2,index2) in item1.children" 
                                            class="designCol"
                                            :style="{width:item2.width,height:item2.height}"                               
                                            >        
                                            <!-- @mousemove.native="_move($event,index1,index2)"    
                                              @mousedown.native="_mousedown($event,index1,index2)"   
                                              @mouseup.native="_mouseup($event,index1,index2)" -->
                                          <div style="width:100%;height:100%"  v-html="item1.content+item2.content">                                  
                                          </div>
                                          </Col>
                                     </transition-group>
                                 </draggable>
                              </Row>
               
               
            </div>
           
          </div>
      </div>
  </div>
</template>
<script>
import splitModal from "./ui-design-split"
import draggable from 'vuedraggable'
export default {
name:'ui-design-board',
components:{splitModal,draggable},
  props:{},
  data(){
    return {
      openSplit:false,
      draggable:true,
      getEl:'',
      setEl:'',
      pagesEl:[
             {
               name:'row',
               width:'100%',
               height:'20%',
               content:'1<div>1</div>',
               children:[
                { 
                name:'Col',
               width:'20%',
               height:'100%',
               content:'1'},
                 { 
                name:'Col',
               width:'20%',
               height:'100%',
               content:'2'},  { 
                name:'Col',
               width:'20%',
               height:'100%',
               content:'3'},  { 
                name:'Col',
               width:'20%',
               height:'100%',
               content:'4'}
               ]
             },       {
               name:'row',
               width:'100%',
               height:'20%',
               content:'2<div>2</div>',
               children:[
                { 
                name:'Col',
               width:'20%',
               height:'100%',
               content:'d'},
                 { 
                name:'Col',
               width:'20%',
               height:'100%',
               content:'c'},  { 
                name:'Col',
               width:'20%',
               height:'100%',
               content:'b'},  { 
                name:'Col',
               width:'20%',
               height:'100%',
               content:'a'}
               ]
             }
            

      ]
    }
  },
  watch:{},
  computed:{},
  methods:{
    changeVal(val){
      this.openSplit=val.modal
    if(val.form){
      console.log(val.form)
    }
    },
     getdata (evt) {
        console.log(evt.draggedContext.element.id)
      },
      datadragEnd (evt) {
        console.log('拖动前的索引 :' + evt.oldIndex)
        console.log('拖动后的索引 :' + evt.newIndex)
        console.log(this.tags)
      },
    _move(e,index1,index2){
       this.setEl={target:e.target,index1:index1,index2:index2}
    },
    _mousedown(e,index1,index2){
      this.getEl={target:e.target,index1:index1,index2:index2}
    },
     _mouseup(){
       console.log(this.setEl)
       console.log(this.getEl)
           if(!this.getEl) return
           if(!this.setEl) return
        this.pagesEl[this.getEl.index1].children[this.getElindex2]=this.setEl.target
        this.pagesEl[this.setEl.index1].children[this.setEl.index2]=this.getEl.target
     
    },
     dragStart(e){
   console.log(e)
     },
       dragOver(e){
          console.log(e)
     },
       dragEnd(e){
      // console.log(e)
   console.log(e.target)
     },
     drag(e){
  //:draggable="draggable" @dragstart="drag($event)" @dragover="dragOver($event)"  @dragend="dragEnd($event)"
       console.log(e.target)
     }
  },
  created(){},
  mounted(){}
}
</script>
<style lang="less" scoped>
.wrapper{width:100%;}
.switchTitle{
  height: 50px;
}
.switchButton{
    margin-right: 16px;
}
.mainContent{
  border: 1px solid  rgba(220, 222, 226, 1);
  width:100%;
  height:calc(~"100% - 50px");
}
.mainContentUl{
height: 100%;
width: 100%;
padding-left:12px;
}
.mainContentTitle{
  list-style: none;
  height: 100%;
  float: left;
  display: flex;
  align-items: center;
  margin-right: 12px;
}
.mainContentTitle span{
  cursor: pointer;
  display: inline;
  padding: 4px;
}
.designBoard{
    
  width: 100%;
  height:calc(~"100% - 50px");
}
#designItem{
border-top: 1px solid  rgba(220, 222, 226, 1);
height: 100%;
width: 100%;
}
.switchClose{
  float: right;
  cursor: pointer;

}
.designCol{
  cursor: pointer;
    border-left: 1px solid  rgba(220, 222, 226, 1);
}
.designCol:last-child{
    border-right: 1px solid  rgba(220, 222, 226, 1);
   
}
.designRow{
      border-top: 1px solid  rgba(220, 222, 226, 1);
}
.designRow:last-child{
    border-bottom: 1px solid  rgba(220, 222, 226, 1);
}
.draggableDesign{
width: 100%;
height: 100%;
}
</style>